<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汉字故事屋 - 学习汉字的有趣方式</title>
    <style>
        :root {
            --primary: #FF6B6B;
            --secondary: #4ECDC4;
            --light-bg: #FFF5F5;
            --dark-text: #333;
            --light-text: #666;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: "Microsoft Yahei", "PingFang SC", sans-serif;
            background-color: #f9f9f9;
            color: var(--dark-text);
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            text-align: center;
            padding: 30px 0;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            border-radius: 10px;
            margin-bottom: 30px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }
        
        .search-container {
            display: flex;
            justify-content: center;
            margin: 20px 0;
        }
        
        #searchInput {
            padding: 12px 20px;
            width: 60%;
            border: none;
            border-radius: 30px 0 0 30px;
            font-size: 1.1rem;
            outline: none;
        }
        
        #searchBtn {
            padding: 12px 25px;
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 0 30px 30px 0;
            cursor: pointer;
            font-size: 1.1rem;
            transition: all 0.3s;
        }
        
        #searchBtn:hover {
            background-color: #ff5252;
        }
        
        .hanzi-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 15px;
            margin-bottom: 30px;
        }
        
        .hanzi-card {
            background-color: white;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        
        .hanzi-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .hanzi-char {
            font-size: 2.5rem;
            margin-bottom: 5px;
        }
        
        .hanzi-pinyin {
            color: var(--primary);
            font-size: 0.9rem;
        }
        
        .content-area {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-top: 30px;
        }
        
        .character-display {
            background-color: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        }
        
        .big-char {
            font-size: 8rem;
            text-align: center;
            margin-bottom: 20px;
            color: var(--primary);
        }
        
        .char-info {
            margin-bottom: 20px;
        }
        
        .char-info p {
            margin-bottom: 8px;
        }
        
        .pinyin {
            font-size: 1.5rem;
            color: var(--primary);
        }
        
        .stroke-order {
            margin-top: 30px;
        }
        
        .stroke-title {
            font-size: 1.2rem;
            margin-bottom: 15px;
            color: var(--primary);
            border-bottom: 2px solid var(--primary);
            padding-bottom: 5px;
            display: inline-block;
        }
        
        .stroke-canvas-container {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        
        #strokeCanvas {
            border: 1px solid #eee;
            background-color: var(--light-bg);
        }
        
        .stroke-controls {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .stroke-btn {
            padding: 8px 15px;
            background-color: var(--secondary);
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .stroke-btn:hover {
            background-color: #3dbeb6;
        }
        
        .stroke-progress {
            text-align: center;
            color: var(--light-text);
        }
        
        .story-section {
            background-color: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        }
        
        .story-title {
            font-size: 1.5rem;
            margin-bottom: 20px;
            color: var(--primary);
        }
        
        .story-content {
            line-height: 1.8;
        }
        
        .story-image {
            width: 100%;
            height: 200px;
            background-color: var(--light-bg);
            border-radius: 8px;
            margin: 20px 0;
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--light-text);
            font-style: italic;
        }
        
#strokeCanvas svg{
    width:300px;
    height:300px;
}
        @media (max-width: 768px) {
            .content-area {
                grid-template-columns: 1fr;
            }
            
            .hanzi-grid {
                grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
            }
            
            #searchInput {
                width: 70%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>汉字故事屋</h1>
            <p>通过有趣的故事和笔画动画学习汉字</p>
        </header>
        
        <div class="search-container">
            <input type="text" id="searchInput" placeholder="输入你想学习的汉字...">
            <button id="searchBtn">搜索</button>
        </div>
        
        <div class="hanzi-grid" id="hanziGrid">
            <!-- 汉字卡片将通过JavaScript动态生成 -->
        </div>
        
        <div class="content-area">
            <div class="character-display">
                <div class="big-char" id="bigChar">水</div>
                
                <div class="char-info">
                    <p><strong>拼音:</strong> <span class="pinyin" id="pinyin"></span></p>
                    <p><strong>笔画数:</strong> <span id="strokeCount"></span></p>
                    <p><strong>部首:</strong> <span id="radical"></span></p>
                    <p><strong>结构:</strong> <span id="structure"></span></p>
                </div>
                
                <div class="stroke-order">
                    <div class="stroke-title">笔画顺序</div>
                    <div class="stroke-canvas-container" >
                        <div id="strokeCanvas" style="width:300px; height:300px"></div>

                    </div>

                    <div class="stroke-controls">
                        <button class="stroke-btn" id="prevStroke">上一步</button>
                        <button class="stroke-btn" id="playPause">播放</button>
                        <button class="stroke-btn" id="nextStroke">下一步</button>
                        <button class="stroke-btn" id="resetStrokes">重置</button>
                    </div>
                    <div class="stroke-progress">
                        当前笔画: <span id="currentStrokeName">横</span>
                        (<span id="currentStrokeNum">1</span>/<span id="totalStrokes">4</span>)
                    </div>
                </div>
            </div>
            
            <div class="story-section">
                <h2 class="story-title">汉字故事</h2>
                <div class="story-image">插图位置</div>
                <div class="story-content" id="hanziStory">
                    汉字"水"是象形字，像流动的水波纹。这个字演变数千年，仍保留着水流动的形态特征。
                </div>
            </div>
        </div>
    </div>

    <script src="https://fastly.jsdelivr.net/npm/cnchar/cnchar.min.js"></script>
    <script src="https://fastly.jsdelivr.net/npm/cnchar-draw/cnchar.draw.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/cnchar-radical/cnchar.radical.min.js"></script>
    <script>
        // 初始化常用汉字列表
        const commonHanzi = [
            { char: '爱', pinyin: 'ài', story: '"爱"字由"爪"(手)、"冖"(覆盖)和"心"组成，表示用手保护心爱之物。古人认为爱是用心呵护的行为。' },
            { char: '家', pinyin: 'jiā', story: '"家"由"宀"(房子)和"豕"(猪)组成。古代家庭养猪表示安定富足，所以用房子下有猪来表示家的概念。' },
            { char: '好', pinyin: 'hǎo', story: '"好"由"女"和"子"组成，表示女子生育子女是美好的事情。体现了古人对家庭美满的向往。' },
            { char: '学', pinyin: 'xué', story: '"学"的繁体"學"由"子"和"攴"(手持教鞭)组成，表示教导儿童。简化后仍保留"子"，强调学习要从娃娃抓起。' },
            { char: '中', pinyin: 'zhōng', story: '"中"像一面旗帜，中间的竖线表示旗杆，口形部分表示旗面。古代立旗于中央位置，故表示"中心"的概念。' },
            { char: '国', pinyin: 'guó', story: '"国"繁体"國"由"囗"(边界)和"或"(武器)组成，表示用武力保卫的疆域。简化后保留了"玉"，象征国家的珍贵。' },
            { char: '人', pinyin: 'rén', story: '"人"是象形字，像侧面站立的人形。最简单的汉字之一，却承载着中华文化"以人为本"的思想。' },
            { char: '山', pinyin: 'shān', story: '"山"是象形字，像三座山峰的形状。古人用最简洁的线条描绘出了山的巍峨气势。' },
            { char: '水', pinyin: 'shuǐ', story: '"水"是象形字，像流动的水波纹。这个字演变数千年，仍保留着水流动的形态特征。' },
            { char: '日', pinyin: 'rì', story: '"日"是象形字，像太阳的形状。方框表示太阳的轮廓，中间一横可能是古代观测到的太阳黑子。' },
            { char: '月', pinyin: 'yuè', story: '"月"是象形字，像月亮的形状。弯月的形象经过演变成为现在的字形，仍能看出月亮的轮廓。' },
            { char: '木', pinyin: 'mù', story: '"木"是象形字，像一棵树，上部是枝叶，下部是树干和根。以简单的线条表现了树木的特征。' }
        ];

        // 初始化画布

        let currentChar = '水';
        let strokeData = [];
        let currentStroke = 0;
        let isPlaying = false;
        let playInterval;
        
        // 初始化汉字网格
        const hanziGrid = document.getElementById('hanziGrid');
        commonHanzi.forEach(hanzi => {
            const card = document.createElement('div');
            card.className = 'hanzi-card';
            card.innerHTML = `
                <div class="hanzi-char">${hanzi.char}</div>
                <div class="hanzi-pinyin">${hanzi.pinyin}</div>
            `;
            card.addEventListener('click', () => loadCharacter(hanzi.char, hanzi.pinyin, hanzi.story));
            hanziGrid.appendChild(card);
        });
        
        // 搜索功能
        document.getElementById('searchBtn').addEventListener('click', searchHanzi);
        document.getElementById('searchInput').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') searchHanzi();
        });
        
        function searchHanzi() {
            const input = document.getElementById('searchInput').value.trim();
            if (input.length === 0) return;
            
            const char = input[0]; // 取第一个字符
            const pinyin = cnchar.spell(char);
console.log(pinyin)
            const story = getHanziStory(char) || `这是一个有趣的汉字，由${cnchar.stroke(char)}笔组成。它的故事等待你来发现！`;
            
            loadCharacter(char, pinyin, story);
        }
        
        // 加载汉字数据
        function loadCharacter(char, pinyin, story) {
            currentChar = char;
            currentStroke = 0;

            // 更新显示
            document.getElementById('bigChar').textContent = char;
            document.getElementById('pinyin').textContent = pinyin;
            document.getElementById('hanziStory').textContent = story;
            
            // 获取笔画数据
            strokeData = cnchar.stroke(char, 'array');
            document.getElementById('strokeCount').textContent = strokeData[0];
            document.getElementById('totalStrokes').textContent = strokeData[0];
            
            // 绘制笔画
            resetStrokes();
            
            // 获取部首和结构信息
            const info = cnchar.radical(char);
console.log(strokeData )
            document.getElementById('radical').textContent = info?(info[0].radical || '无'):'';
            document.getElementById('structure').textContent = info?(info[0].struct || '无'):'';
 cnchar.draw(currentChar, {
                    el: '#strokeCanvas',
type: cnchar.draw.TYPE.ANIMATION,
style:{length:300},
        animation:{
            loopAnimate: true
        }

                });
        }
        
        // 获取汉字故事
        function getHanziStory(char) {
            const hanzi = commonHanzi.find(h => h.char === char);
            return hanzi ? hanzi.story : null;
        }
        
        // 绘制笔画
        function drawStroke(index) {
            if (index >= strokeData.length) {
                pauseAnimation();
                return;
            }
            

            // 绘制已完成的所有笔画
            for (let i = 0; i <= index; i++) {
                cnchar.draw(currentChar, {
                    el: '#strokeCanvas',

                    animation: {
autoAnimate:true
}

                });
            }
            
            // 更新进度
            currentStroke = index;
            document.getElementById('currentStrokeNum').textContent = index + 1;
            document.getElementById('currentStrokeName').textContent = strokeData[index];
        }
        
        // 播放动画
        function playAnimation() {
            if (isPlaying) return;
            
            isPlaying = true;
            document.getElementById('playPause').textContent = '暂停';
            
            playInterval = setInterval(() => {
                if (currentStroke >= strokeData.length - 1) {
                    pauseAnimation();
                    return;
                }
                drawStroke(currentStroke + 1);
            }, 800);
        }
        
        // 暂停动画
        function pauseAnimation() {
            if (!isPlaying) return;
            
            isPlaying = false;
            clearInterval(playInterval);
            document.getElementById('playPause').textContent = '播放';
        }
        
        // 重置笔画
        function resetStrokes() {
            pauseAnimation();

            currentStroke = -1;
            document.getElementById('currentStrokeNum').textContent = '0';
            document.getElementById('playPause').textContent = '播放';
        }
        
        // 事件监听
        document.getElementById('prevStroke').addEventListener('click', () => {
            pauseAnimation();
            if (currentStroke > 0) {
                drawStroke(currentStroke - 1);
            }
        });
        
        document.getElementById('nextStroke').addEventListener('click', () => {
            pauseAnimation();
            if (currentStroke < strokeData.length - 1) {
                drawStroke(currentStroke + 1);
            }
        });
        
        document.getElementById('playPause').addEventListener('click', () => {
            if (isPlaying) {
                pauseAnimation();
            } else {
                if (currentStroke >= strokeData.length - 1) {
                    resetStrokes();
                }
                playAnimation();
            }
        });
        
        document.getElementById('resetStrokes').addEventListener('click', resetStrokes);
        
        // 初始化加载第一个汉字
        loadCharacter('水', cnchar.spell('水'), commonHanzi.find(h => h.char === '水').story);
    </script>
</body>
</html>